<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.USER的主题</title>
    {#    <link rel="stylesheet" href="static/css/bootstrap.css" rel="stylesheet">#}
    <script src="/static/home/js/bootstrap.js"></script>
    <style>
        /* 设置输入框中文本的样式 */
        .custom-textarea {
            width: 50rem;
            height: 400px;
            text-align: left;
            word-wrap: break-word;
            white-space: pre-wrap; /* 确保换行符正常显示 */
            padding: 5px;
            margin: 0;
            overflow: auto; /* 添加滚动条，内容超出时自动显示 */
        }

        .custom-textarea2 {
            width: 40rem;
            height: 300px;
            text-align: left;
            word-wrap: break-word;
            white-space: pre-wrap; /* 确保换行符正常显示 */
            padding: 5px;
            margin: 0;
            overflow: auto; /* 添加滚动条，内容超出时自动显示 */
        }
    </style>
</head>
<body>
<button type="button" class="btn btn-secondary" id="fetch-api-button">调用get_API</button>
<button type="button" class="btn btn-secondary" id="filter-today-button">显示两个小时内的数据</button>
<!-- 新增显示 API 返回数据的文本框 -->
<br>
<textarea id="api-result" class="form-control custom-textarea" readonly></textarea>
<br>


<!-- 将按钮和输入框移到 body 标签中 -->
<button type="button" class="btn btn-secondary" id="post-api-button">调用post_API</button>
<br>
<input type="text" id="post-input" class="custom-textarea2" placeholder="输入 data 内容">
<br>
<textarea id="post-result" readonly></textarea>
<!-- 添加用于显示 POST 请求结果的文本框 -->


<div>
    <h2>新建用户</h2>
    <form action="/app01/user/" method="post">
        <input type="text" name="user" placeholder="用户名">
        <input type="text" name="age" placeholder="年龄">
        <input type="text" name="email" placeholder="邮箱">
        <input type="submit" value="提交">
    </form>
</div>
<div>
    <h2>用户表格</h2>
    <table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>Email</th>
        </tr>
    </table>
    <tbody>
    {% for row in queryset %}
        <tr>
            <td>{{ row.id }}</td>
            <td>{{ row.name }}</td>
            <td>{{ row.age }}</td>
            <td>{{ row.email }}</td>
        </tr>
        <hr>
    {% endfor %}
    </tbody>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 获取按钮和文本框元素
        const fetchButton = document.getElementById('fetch-api-button');
        const filterButton = document.getElementById('filter-today-button');
        const resultInput = document.getElementById('api-result');


        // 为调用 API 按钮添加点击事件监听器
        fetchButton.addEventListener('click', function () {
            // 清空文本框内容
            resultInput.value = '';
            // 使用 fetch API 发送 GET 请求
            fetch('http://localhost:9901/app01/xunlei_link')
                .then(response => {
                    // 检查响应状态是否成功
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    // 将响应数据解析为 JSON 对象
                    return response.json();
                })
                .then(data => {
                    // 提取 main_link 字段的值
                    const mainLinks = data.map(item => item.main_link);
                    // 将 main_link 字段的值以换行符连接成字符串
                    const mainLinksText = mainLinks.join('\n');
                    // 将解析后的数据显示在文本框中
                    resultInput.value = mainLinksText;
                })
                .catch(error => {
                    // 处理请求过程中出现的错误
                    console.error('Fetch error:', error);
                    resultInput.value = `请求出错: ${error.message}`;
                });
        });

        // 为过滤前两小时数据按钮添加点击事件监听器
        filterButton.addEventListener('click', function () {
            // 清空文本框内容
            resultInput.value = '';

            // 获取当前时间和两小时前的时间戳
            const now = new Date();
            const twoHoursAgo = new Date(now.getTime() - 2 * 60 * 60 * 1000);
            const nowTimestamp = Math.floor(now.getTime() / 1000);
            const twoHoursAgoTimestamp = Math.floor(twoHoursAgo.getTime() / 1000);

            // 使用 fetch API 发送 GET 请求
            fetch('http://localhost:9901/app01/xunlei_link')
                .then(response => {
                    // 检查响应状态是否成功
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    // 将响应数据解析为 JSON 对象
                    return response.json();
                })
                .then(data => {
                    const filteredData = data.filter(item => {
                        const timeJoin = parseInt(item.time_join);
                        return timeJoin >= twoHoursAgoTimestamp && timeJoin <= nowTimestamp;
                    });

                    // 提取 main_link 字段的值
                    const mainLinks = filteredData.map(item => item.main_link);
                    // 将 main_link 字段的值以换行符连接成字符串
                    const mainLinksText = mainLinks.join('\n');
                    // 将解析后的数据显示在文本框中
                    resultInput.value = mainLinksText;
                })
                .catch(error => {
                    // 处理请求过程中出现的错误
                    console.error('Fetch error:', error);
                    resultInput.value = `请求出错: ${error.message}`;
                });
        });
    });
    // 为调用 POST API 按钮添加点击事件监听器
    const postButton = document.getElementById('post-api-button');
    const postInput = document.getElementById('post-input');
    const postResultInput = document.getElementById('post-result');

    postButton.addEventListener('click', function () {
        // 获取输入框中的内容
        const inputData = postInput.value;
        // 清空结果文本框内容
        if (postResultInput) {
            postResultInput.value = '';
        }

        // 构建符合服务器要求的 JSON 请求体
        const requestBody = {
            data: inputData
        };

        // 使用 fetch API 发送 POST 请求
        fetch('http://localhost:9901/app01/xunlei_input', {
            method: 'POST',
            headers: {
                // 设置请求头为 application/json
                'Content-Type': 'application/json'
            },
            // 将请求体对象转换为 JSON 字符串
            body: JSON.stringify(requestBody)
        })
            .then(response => {
                // 检查响应状态是否成功
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                // 将响应数据解析为 JSON 对象
                return response.json();
            })
            .then(data => {
                if (data.code === 200) {
                    if (postResultInput) {
                        postResultInput.value = `请求成功：${data.info}`;
                        postInput.value = '';

                    }
                } else {
                    if (postResultInput) {
                        postResultInput.value = `请求失败：${data.info}`;
                    }
                }
            })
            .catch(error => {
                // 处理请求过程中出现的错误
                console.error('Fetch error:', error);
                if (postResultInput) {
                    postResultInput.value = `请求出错: ${error.message}`;
                }
            });
    });
</script>
</body>
</html>